<template>
  <div class="container">
    <el-card shadow="never" class="card">
      <el-form
        ref="formRef"
        class="addForm"
        :rules="rules"
        :model="formData"
        label-width="120px"
      >
        <h5 class="title">软著信息</h5>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="软件名称：" prop="title">
              <el-input v-model="formData.title" placeholder="请输入软件名称" />
            </el-form-item>
            <el-form-item label="证书编号：" prop="code">
              <el-input v-model="formData.code" placeholder="请输入证书编号" />
            </el-form-item>
            <el-form-item label="著作权人：" prop="apply_user">
              <el-input
                v-model="formData.apply_user"
                placeholder="请输入著作权人"
              />
            </el-form-item>
            <el-form-item label="发证机关：" prop="grant_office">
              <el-input
                v-model="formData.grant_office"
                placeholder="请输入发证机关"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登记号：" prop="reg_code">
              <el-input
                v-model="formData.reg_code"
                placeholder="请输入登记号"
              />
            </el-form-item>
            <el-form-item label="发证日期：" prop="grant_time">
              <el-date-picker
                v-model="formData.grant_time"
                type="datetime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期时间"
              />
            </el-form-item>
            <el-form-item label="权利范围：" prop="right_scope">
              <el-input
                v-model="formData.right_scope"
                placeholder="请输入权利范围"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="授权文件：" prop="grant_file">
          <BaseUpload v-model="formData.grant_file" :show-file-list="false">
            <BaseImg
              v-if="formData.grant_file"
              :preview="false"
              class="upload-img"
              :src="formData.grant_file[0].url"
            />
            <div v-else class="upload-card">
              <i class="el-icon-plus" />
            </div>
            <p slot="description" />
          </BaseUpload>
        </el-form-item>
      </el-form>
      <div class="add-btn">
        <el-button class="add" type="primary" @click="handleAddSoft">
          添加
        </el-button>
        <el-button class="exit" @click="handleCancel">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import softApi from '@/api/soft'
import BaseUpload from '@/components/baseUpload'
import BaseImg from '@/components/baseImg'
export default {
  components: {
    BaseUpload,
    BaseImg
  },
  data() {
    return {
      rules: {
        title: {
          required: true,
          message: '请输入软件名称'
        },
        code: {
          required: true,
          message: '请输入证书编号'
        },
        reg_code: {
          required: true,
          message: '请输入登记号'
        },
        apply_user: {
          required: true,
          message: '请输入著作权人'
        },
        right_scope: {
          required: true,
          message: '请输入权利范围'
        },
        grant_office: {
          required: true,
          message: '请输入发证机关'
        },
        grant_time: {
          required: true,
          message: '请输入发证日期'
        },
        grant_file: {
          required: true,
          validator: this.checkFile,
          trigger: 'change'
        }
      },
      formData: {}
    }
  },
  created() {
    this.getSoftInfo()
  },
  methods: {
    async getSoftInfo() {
      if (this.$route.query.id) {
        const res = await softApi.softInfo({
          id: this.$route.query.id
        })
        this.formData = {
          ...res.data,
          grant_file: [{ url: res.data.grant_file }]
        }
      }
    },
    checkFile(rule, value, cb) {
      if (value?.length) {
        cb()
      } else {
        cb(new Error('请上传软著等级证书'))
      }
    },
    handleCancel() {
      this.$router.back()
    },
    async handleAddSoft() {
      const res = await this.$refs.formRef
        .validate()
        .catch(err => console.log(err))
      if (res) {
        let result = null
        this.formData = {
          ...this.formData,
          grant_file: this.formData.grant_file[0].url
        }
        if (this.formData.id) {
          result = await softApi.editSoft(this.formData)
        } else {
          result = await softApi.addSoft(this.formData)
        }
        if (result.code == 0) {
          this.$message.success(result.msg)
          this.$router.back()
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.addForm {
  ::v-deep .el-date-editor.el-input,
  .el-select {
    width: 100%;
  }
}
.add-btn {
  text-align: center;
  padding: 50px 0 30px 0;
}
.container h5.title {
  height: 40px;
  line-height: 40px;
  border-left: 4px solid #f84311;
  background-color: #f5f5f5;
  font-size: 15px;
  color: #555;
  padding-left: 20px;
  margin-bottom: 20px;
}
.upload-img {
  width: 100px;
}
.upload-card {
  width: 100px;
  height: 100px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-align: center;
  line-height: 100px;
}
</style>
